import {
  Routes,
  Route,
  useNavigate,
  NavLink,
  Navigate,
  Outlet,
} from "react-router-dom";

import "./简单使用.css";

export default function App() {
  return (
    <div className="App">
      <h1>Welcome to React Router!</h1>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />}>
          {/* 定义嵌套路由 */}
          <Route path="child" element={<AboutChild/>}></Route>
        </Route>
        <Route path="*" element={<Navigate to="/" />} />
      </Routes>
    </div>
  );
}

function AboutChild() {
  return (
    <>
      <h2>Hello AboutChild</h2>
    </>
  );
}

function Home() {
  let activeClassName = "underline";
  return (
    <>
      <main>
        <h2>Welcome to the homepage!</h2>
        <p>You can do this, I believe in you.</p>
      </main>
      <nav>
        <NavLink
          to="/about"
          className={({ isActive }) => (isActive ? activeClassName : undefined)}
        >
          About
        </NavLink>
      </nav>
    </>
  );
}

function About() {
  const navigate = useNavigate();
  const handelClickToHome = () => {
    navigate("/");
  };

  const handelClickToChild = () => {
    navigate("/about/child");
  };
  return (
    <>
      <main>
        <h2>Who are we?</h2>
        <p>That feels like an existential question, don't you think?</p>
      </main>
      <button onClick={handelClickToChild}>嵌套路由</button>
      {/* 定义子路由的显示位置 */}
      <Outlet/>
        <button onClick={handelClickToHome}>Home</button>
    </>
  );
}
